<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、Object.defineProperty</h2>
  <div>定义：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象</div>
  <h4>为什么能实现响应式</h4>
  <div>通过defineProperty 两个属性，get及set</div>
  <ul>
    <li>get:属性的 getter 函数，当访问该属性时，会调用此函数</li>
    <li>set:属性的 setter 函数，当属性值被修改时，会调用此函数。</li>
  </ul>
  <div>Vue2中，增加了set、delete API，并且对数组api方法进行一个重写</div>
  <br>
  <div>如果存在深层的嵌套对象关系，需要深层的进行监听，造成了性能的极大问题</div>
  <h4>小结</h4>
  <ul>
    <li>检测不到对象属性的添加和删除</li>
    <li>数组API方法无法监听到</li>
    <li>需要对每个属性进行遍历监听，如果嵌套对象，需要深层监听，造成性能问题</li>
  </ul>
  <h2>二、proxy</h2>
  <div>Proxy的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作，这就完全可以代理所有属性了</div>
  <h2>三、总结</h2>
  <div>Object.defineProperty只能遍历对象属性进行劫持</div>
  <br>
  <div>Proxy直接可以劫持整个对象，并返回一个新对象，我们可以只操作新的对象达到响应式目的</div>
  <br>
  <div>Proxy可以直接监听数组的变化（push、shift、splice）</div>
  <br>
  <div>Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等，这是Object.defineProperty不具备的</div>
  <br>
  <div></div>






</body>
</html>